<!-- 终端总览 -->
<template>
  <view class="page-terminal" :class="{'backTransparent': selected}">
    <!-- v-show="!selected"  -->
    <view v-show="!selected" v-for="terminal in terminalList" :key="terminal.prop" class="terminalItem" @click="toTerminalDetail(JSON.stringify(terminal))">
      <view class="title">
        <span class="titleIcon"></span>
        {{ terminal.terminalName }}
        <view class="right-tag">
          <span 
            v-for="void1 in voidList" 
            :key="void1.label" 
            v-show="void1.value === terminal.equipmentAlarmStatus"
            class="tag" 
            :style="{'color': void1.textColor,'backgroundColor': void1.color,'display': void1.value === terminal.equipmentAlarmStatus ? 'inline-block': 'none'}"
            >
            {{void1.label}}
          </span>
          <span 
            v-for="status in statusList" 
            :key="status.label" 
            v-show="status.value === terminal.terminalStatus" 
            class="tag" 
            :style="{'color': status.textColor,'backgroundColor': status.color, 'display': status.value === terminal.terminalStatus ? 'inline-block': 'none'}"
            >
            {{status.label}}
          </span>
        </view>
      </view>
      <view class="dataContent">
        <view class="deviceInfoList">
          <view v-for="device in terminal.equipmentList" :key="device.name" class="deviceItem">
            <view class="deviceData" :class="{'online': ['2'].includes(device.onlintStatus) ,'policeNum': ['4'].includes(device.onlintStatus), 'unonline': ['1', '3'].includes(device.onlintStatus) }">{{ device.onlintStatusName }}</view>
            <!-- <view class="deviceData yewei" v-if="device.name === '液位计'">{{ ['正常','异常'][device.deviceStatus-1] }}</view>
            <view class="deviceData diandaolv" v-if="device.name === '电导率'">{{ ['离线','未激活'][device.deviceStatus-1] }}</view> -->
            <view>{{ device.equTypeName }}</view>
          </view>
        </view>
        <!-- <view class="deviceItem">
          <view class="deviceData haoneng">{{ terminal.energyConsumption }}<span class="unit">KW·h</span></view>
          <view>当日耗能</view>
        </view> -->
        <view class="deviceItem">
          <view class="deviceData policeNum">{{ terminal.alarmCount }}<span class="unit">次</span></view>
          <view>报警总数</view>
        </view>
      </view>
      <view class="card-footer">
        <span class="installTime"><van-icon name="clock" class="dateIcon" />安装时间 <span class="dateValue">{{ terminal.installTime }}</span></span>
      </view>
    </view>

    <TerminalDetail v-if="selected" :terminalName="selectData.terminalName" :terminalStatus="selectData.terminalStatus" :terminalId="selectData.terminalId" :equList="selectData.equipmentList"/>
  </view>
</template>

<script>
import TerminalDetail from './terminalDetail.vue';
import { getVillageTerminalInfo, geTerminalEquData } from '@/api/manage'
export default {
  components: { TerminalDetail },
  props: {
    villageId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selected: false,
      selectData: {
        terminalName:''
      },
      terminalList: [
        // { terminalName:'李家村终端1号', status: 2, isVoid: 1, deviceList:[
        //   {name: '液位计', deviceStatus: 1, color: '#74CDAF'},
        //   {name: '电导率', deviceStatus: 2, color: ''},
        // ], dailyConsume:'0.64', policeNum: 1, installTime:'2024-10-21'},
        // { terminalName:'李家村终端2号', status: 1, isVoid: 2, deviceList:[
        //   {name: '液位计', deviceStatus: 1, color: ''},
        //   {name: '电导率', deviceStatus: 1, color: ''},
        // ], dailyConsume:'0.64', policeNum: 1, installTime:'2024-10-21'}
      ],
      voidList: [
        { label: '正常', value: 0, color: '#D5EFE7', textColor: '#74CDAF' },
        { label: '异常', value: 1, color: '#FFEBEF', textColor: '#FC8382' }
      ],
      statusList: [
        { label: '运行', value: 1, color: '#E5EEFF', textColor: '#3C8AFF' },
        { label: '未运行', value: 2, color: '#E1E1E1', textColor: '#8E8E8E' }
      ]
    }
  },
  created() {
    uni.$on('returnTerminal', (show)=>{
      console.log('返回', show)
      this.selected = show.selected
    })
  },
  watch: {
    villageId: {
      handler: function (val) {
        console.log(val,'变了吗')
        if (val) {
          console.log(val,'检测到村庄id')
          this.getVillageTerminalInfo(val)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 获取村庄终端概况
    getVillageTerminalInfo(villageId) { 
      getVillageTerminalInfo(villageId).then(({ data }) => {
        console.log(data, 'data')
        this.terminalList = data.data
      })
    },
    toTerminalDetail(terminal) {
      console.log(JSON.parse(terminal),'传参')
      this.selectData = JSON.parse(terminal)
      this.selected = true
    }
  }
}
</script>

<style lang="scss" scoped>
.backTransparent{
  background: transparent !important;
}
.page-terminal{
  color: #000;
  padding: 12rpx;
  background: #fff;
  margin: 32rpx;
  border-radius: 10rpx;
  .terminalItem{
    background: #F3F5F9;
    border-radius: 10rpx;
    padding: 16rpx 12rpx;
    margin-bottom: 16rpx;
    .title{
      position: relative;
      font-weight: 800;
      font-size: 28rpx;
      color: #4A4A4A;
      line-height: 40rpx;
      text-align: left;
      .titleIcon{
        display: inline-block;
        width: 8rpx;
        height: 20rpx;
        background: #2769F7;
        border-radius: 6rpx;
        opacity: 0.6;
        margin-right: 12rpx;
      }
      .right-tag{
        position: absolute;
        right: 0rpx;
        top: 0rpx;
        .tag{
          display: inline-block;
          padding: 2rpx 24rpx;
          border-radius: 6rpx;
          font-size: 24rpx;
          margin-right: 12rpx;
        }
      }
    }
    .dataContent{
      display: flex;
      justify-content: space-around;
      font-weight: bold;
      font-size: 24rpx;
      color: #686868;
      margin: 36rpx 0;
      .deviceInfoList{
        max-width: 80%;
        display: flex;
        white-space: wrap;
      }
      .deviceItem{
        margin: 0 10rpx;
        .online{
          color:#74CDAF !important
        }
        .unonline{
          color:#8E8E8E !important
        }
        .haoneng{
          color:#7B9CE3
        }
        .policeNum{
          color: #FC8382 !important
        }
        .unit{
          font-size: 24rpx;
        }
        .deviceData{
          font-weight: 800;
          font-size: 28rpx;
          line-height: 40rpx;
          margin-bottom: 16rpx;
          white-space: nowrap;
        }
      }
    }
    .card-footer{
      text-align: left;
      .installTime{
        display: inline-block;
        font-size: 24rpx;
        background: #fff;
        border-radius: 6rpx;
        padding: 8rpx;
        .dateIcon{
          font-size: 22rpx;
          color: #989898
        }
        .dateValue{
          color: #4A4A4A;
          margin-left: 16rpx;
        }
      }
    }
  }
}
</style>